// 定义支付方式的枚举或常量
import 'package:flutter/material.dart';

enum PaymentMethod { wechat, alipay }

class PaymentMethodSheet extends StatefulWidget {
  final Function(PaymentMethod selectedMethod)? onConfirm;
  
  const PaymentMethodSheet({super.key, this.onConfirm});

  @override
  State<PaymentMethodSheet> createState() => _PaymentMethodSheetState();
}

class _PaymentMethodSheetState extends State<PaymentMethodSheet> {
  // 初始选中微信
  PaymentMethod _selectedMethod = PaymentMethod.wechat;

  void _selectMethod(PaymentMethod method) {
    setState(() {
      _selectedMethod = method;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      // 底部弹窗主体容器
      padding: const EdgeInsets.fromLTRB(8, 16, 8, 20),
      decoration: const BoxDecoration(
        color: Color(0xFFF5F7FA),
        borderRadius: BorderRadius.vertical(top: Radius.circular(15.0)),
      ),
      child: SafeArea(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 顶部标题和关闭按钮
            _buildHeader(context),
            const SizedBox(height: 19),

            // 微信选项
            _PaymentOptionItem(
              title: '微信',
              icon: 'icon_wechat',
              isSelected: _selectedMethod == PaymentMethod.wechat,
              onTap: () => _selectMethod(PaymentMethod.wechat),
            ),

            // 支付宝选项
            _PaymentOptionItem(
              title: '支付宝',
              icon: 'icon_zfb',
              isSelected: _selectedMethod == PaymentMethod.alipay,
              onTap: () => _selectMethod(PaymentMethod.alipay),
            ),

            // 温馨提示
            _buildTips(),

            const SizedBox(height: 15),

            // 底部确认按钮
            _buildConfirmButton(context),
          ],
        ),
      ),
    );
  }

  Widget _buildHeader(BuildContext context) {
    const double closeButtonWidth = 18.0;

    return Row(
      // 不再使用 mainAxisAlignment.spaceBetween，而是通过占位符控制布局
      children: [
        // 1. 左侧占位符：宽度与右侧关闭按钮一致，实现标题居中对齐
        const SizedBox(width: closeButtonWidth),

        // 2. 标题：使用 Expanded 占据剩余所有空间
        Expanded(
          child: const Text(
            '选择支付方式',
            // 关键：将文本对齐方式设置为居中
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.bold,
              color: Colors.black,
            ),
          ),
        ),

        // 3. 右侧关闭按钮
        InkWell(
          child: Image.asset(
            'assets/images/ic_close.png',
            height: 18,
            width: 18,
          ),
          onTap: () => Navigator.of(context).pop(),
        ),
      ],
    );
  }

  Widget _buildTips() {
    return const Padding(
      padding: EdgeInsets.only(left: 4.0, right: 4.0),
      child: Text.rich(
        TextSpan(
          text: '温馨提示:\n',
          style: TextStyle(color: Color(0xFF999999), fontSize: 13),
          children: [
            TextSpan(
              text: '1. 跳转后请及时付款，超时支付无法到账，需重新提交订单\n',
              style: TextStyle(color: Color(0xFF999999), fontSize: 13),
            ),
            TextSpan(
              text: '2. 本APP有稳定的赞助商和广告收入，产品安全无毒，请放心使用!\n',
              style: TextStyle(color: Color(0xFF999999), fontSize: 13),
            ),
            TextSpan(
              text: '3. 遇到支付宝或者微信提醒恶意软件请忽略!无法支付请尝试切换支付方式重新发起',
              style: TextStyle(color: Color(0xFF999999), fontSize: 13),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildConfirmButton(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      height: 47,
      child: ElevatedButton(
        onPressed: () {
          print('确认支付方式: $_selectedMethod');
          // 调用回调函数并传递选中的支付方式
          if (widget.onConfirm != null) {
            widget.onConfirm!(_selectedMethod);
          }
          Navigator.of(context).pop();
        },
        style: ElevatedButton.styleFrom(
          backgroundColor: const Color(0xFFBB0C52),
          foregroundColor: Colors.white,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(30.0),
          ),
        ),
        child: const Text(
          '确定',
          style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}

class _PaymentOptionItem extends StatelessWidget {
  final String title;
  final String icon;
  final bool isSelected;
  final VoidCallback onTap;

  const _PaymentOptionItem({
    required this.title,
    required this.icon,
    required this.isSelected,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        // 外层：渐变背景（作为边框）
        margin: const EdgeInsets.only(bottom: 12.0),
        padding: EdgeInsets.all(1), // 边框粗细（数值=边框宽度）
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: isSelected
                ? [Color(0xFFA877F4), Color(0xFF5650D6)]
                : [Color(0xFF999999), Color(0xFF999999)], // 渐变颜色（可多色）
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
          borderRadius: BorderRadius.circular(10), // 边框圆角（与内层一致）
        ),
        // 内层：实际内容容器
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 12.0),
          decoration: BoxDecoration(
            color: const Color(0xFFF5F7FA),
            borderRadius: BorderRadius.circular(10.0),
          ),
          child: Row(
            children: [
              Container(
                width: 42,
                height: 42,
                padding: EdgeInsets.all(9),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: Colors.white,
                ),
                child: Image.asset(
                  'assets/images/${icon}.png',
                  width: 24,
                  height: 24,
                ),
              ),
              const SizedBox(width: 12),
              Text(
                title,
                style: const TextStyle(color: Color(0xFF333333), fontSize: 15),
              ),
              const Spacer(),
              // 选中/未选中图标
              Image.asset(
                isSelected
                    ? 'assets/images/icon_selected.png'
                    : 'assets/images/icon_unselect.png',
                width: 24,
                height: 24,
              ),
            ],
          ),
        ),
      ),
    );
  }
}
